<template>
  <div>
    <div class="menu">
      <el-button type="primary" size="small" @click="openAddRotation">添加</el-button>
      <el-button type="primary" size="small" @click="openShowRotation(rotationImgList)">展示轮播</el-button>
      <!-- 模糊查询 -->
      <div class="vagueFind">
        <el-form :inline="true" :model="vagueFindForm" class="demo-form-inline" size="small">
          <el-form-item label="图片状态">
            <template>
              <el-select v-model="vagueFindForm.status" placeholder="可选择状态" clearable>
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="图片名称">
            <el-input v-model="vagueFindForm.bannerName" placeholder="请输入图片名称" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getRotationList(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="info" icon="el-icon-delete" circle size="small" title="清除文本框数据" @click="clearvagueFindForm"></el-button>
    </div>
    <!-- 用户列表 -->
    <el-table :data="rotationList" style="width: 100%" v-loading="loadStatus">
      <el-table-column prop="bannerId" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="bannerName" label="图片名称" width="200">
      </el-table-column>
      <el-table-column prop="bannerImg" label="图片" width="200">
        <template v-slot="scope">
          <!-- <img :src="scope.row.bannerImg" /> -->
          <el-image
              style="width: 100px; height: 60px"
            :src="scope.row.bannerImg"
            :preview-src-list="[scope.row.bannerImg]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="图片状态" width="200">
        <template v-slot="scope">
          {{scope.row.status==0?'禁用':'启用'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="openEditor(scope.row)">编辑</el-button>&nbsp;&nbsp;
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delRotation(scope.row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="5" @current-change="getRotationList"
    	:total="rotationCount">
    </el-pagination>
    <AddRotation :addVisible="addVisible"></AddRotation>
    <EditorRotation :editorVisible="editorVisible" :editorObj="editorObj"></EditorRotation>
    <ShowRotation :showVisible="showVisible" :showObj="showObj"></ShowRotation>
  </div>
</template>

<script>
  //导入子组件
  import AddRotation from "./component/AddRotation.vue"
  import EditorRotation from "./component/EditorRotation.vue"
  import ShowRotation from "./component/ShowRotation.vue"
  export default {
    name: "rotation",
    components: {
    	AddRotation,
      EditorRotation,
      ShowRotation,
    },
    data() {
      return {
        loadStatus: false,
        addVisible: false,
        editorVisible:false,
        showVisible:false,
        rotationList:[],
        rotationImgList:[],
        rotationCount: 0,
        editorObj:{},
        showObj:{},
        // 模糊查询用实体
        vagueFindForm: {
          status: null,
          bannerName:""
        },
        //显示状态
        status:[{
          value:0,
          label: '禁用'
        },{
          value:1,
          label: '启用'
        }
        ],
      }
    },
    mounted() {
    	this.getRotationList(1)
    },
    methods: {
      clearvagueFindForm(){
        this.vagueFindForm={
          status: null,
          bannerName:""
        }
        this.getRotationList(1)
      },
      //显示添加组件方法
      openAddRotation() {
      	this.addVisible = true
      },
      openEditor(obj){
        console.log(obj)
        var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(obj.bannerId){
          this.editorObj=obj
          this.editorVisible=true
        }else{
          this.$message({
            message: "获取数据错误",
            type: "error",
            duration: 1000,
          })
        }
      },
      openShowRotation(obj){
        console.log(obj)
        this.showObj=obj
        this.showVisible = true
      },
      //查询数据
      getRotationList(page){
        var self = this;
        self.loadStatus = true
        sessionStorage.setItem("page",page)
        var manager = JSON.parse(sessionStorage.getItem("manager"))
        //进行空值还原，防止数据类型错误
        if(this.vagueFindForm.status===""){
          this.vagueFindForm.status=null
        }
        self.$http.get("/api/CakeShop/Banner/findAllImg", {
        	params: {
            start: page,
            pageSize: 5,
            status:this.vagueFindForm.status,
            bannerName:this.vagueFindForm.bannerName
        	}
        }).then(function(res) {
        	// console.log(res)
        	if (res.data.bannerList != null || res.data.bannerList != {}) {
        		self.rotationCount = res.data.pageCount
        		self.rotationList = res.data.bannerList
            self.rotationImgList = res.data.bannerImgList
        		self.loadStatus = false
        	}
        }).catch(function(error) {
        	// console.log(error)
        	self.loadStatus = false
        })
      },

      //删除数据
      delRotation(param) {
        var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        //防止图片空值
        if(param.bannerImg==''){
          param.bannerImg==null
        }
        this.$http.delete("/api/CakeShop/Banner/delBanner", {
          headers: {
            token: onlineManager.token
          },
          params: {
            bannerId:param.bannerId,
            bannerImg:param.bannerImg,
          }
        }).then((res) => {
          // console.log(res)
          if (res.data.delSuccNum>0) {
            this.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                this.getRotationList(sessionStorage.getItem("page"))
              }
            })
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
              duration: 1000
            })
          }
        }, function(err) {})
      }
    },
  }
</script>

<style scoped>
  .menu {
    display: flex;
  	width: 100%;
  	padding: 10px 5px;
  	background: #FFFFFF;
  	box-sizing: border-box;
  	margin-bottom: 5px;
  }
  .menu .vagueFind{
    display: flex;
    background: #FFFFFF;
    margin-left: 20px;
  }
  .menu .vagueFind .el-form .el-form-item{
    margin-bottom: 0;
  }
  .menu .vagueFind .el-select{
    width: 120px;
  }
</style>
